<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>4-8</title>
  <script src='vue/vue.js'></script>
</head>
<!-- 
component 动态组件标签
通过v-once可以提高静态文件的展示效率
 -->

<body>
  <div id="root">
    <component :is="type"></component>
    <button type="button" @click="clickBtn">change</button>
  </div>
  <script>
    Vue.component('child-one', {
      template: '<div v-once>this is Vue</div>',
    })
    Vue.component('child-two', {
      template: '<div>this is AngularJS</div>',
    })
    var vm = new Vue({
      el: "#root",
      data: {
        type: 'child-one'
      },
      methods: {
        clickBtn: function () {
          this.type = (this.type === "child-one" ? "child-two" : "child-one")
        }
      }
    })
  </script>
</body>

</html>